<template>
  <div class="home">
    <el-container>
      <el-header>
        <Header />
      </el-header>

      <el-container>
        <el-aside :width="isCollapse ? 'auto' : '250px'">
          <Aside />
        </el-aside>
        <el-main class="main">
          <Breadcrumb class="breadcrumb" />
          <div class="routerview">
            <router-view />
          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Aside from "./components/Aside.vue";
import Header from "./components/header.vue";
import { ref, provide } from "vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
const isCollapse = ref(false);
provide("isCollapse", isCollapse);
</script>

<style scoped lang="less">
.home {
  height: 100%;
  overflow: hidden;

  :deep(.el-aside),
  :deep(.el-main) {
    height: calc(100vh - 70px);
    // padding: 0 20px;
    box-sizing: border-box;


    // 控制容器的滚动条的样式
    &::-webkit-scrollbar {
      width: 0;
    }

    .el-menu {
      border: 0;



    }
  }

  :deep(.el-aside) {
    background-color: #304156;
  }

  :deep(.el-dropdown) {
    color: #fff;
  }

  :deep(.el-header) {
    height: 70px;
    background-color: #409eff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .main {
    position: relative;
    height: calc(100vh - 70px);
    // padding: 0 20px;
    box-sizing: border-box;

    .breadcrumb {
      // height: 0;
      position: fixed;
      top: 70px;
      padding-left: 20px;
      background-color: #fff;
      // height: 30px;
      width: 100vw;
      overflow: hidden;
      border-bottom: 1px solid rgb(219, 219, 219);
      margin-left: -20px;

    }

    .routerview {}

    margin-top: 50px;
    padding-top: 70px;
    padding-bottom: 70px;
  }


}
</style>
